<template>
	<div class="wrapper customer-boxbrand"  @keyup.enter="doLogin"  @click="treeBlurHide">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
			<el-row>
				<el-col :span="4">
					<el-form-item label="品牌名称:" >
						<!-- <el-input placeholder="品牌名称" v-model="filter.brandName" size="small"></el-input> -->
						 <el-autocomplete
						      v-model="filter.brandName"
						      :fetch-suggestions="querySearch"
						      placeholder="品牌名称"
						      @select="handleSelect"
						      size="small"
						></el-autocomplete>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="联系人:">
						 <el-input placeholder="联系人" v-model="filter.contactName" size="small"></el-input> 
						<!--<el-autocomplete
						  v-model="filter.contactName"
						  :fetch-suggestions="querySearchAsync"
						  placeholder="联系人"
						  @select="handleSelectAsync"
						></el-autocomplete>-->
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="手机号码:">
						<el-input placeholder="手机号码" v-model="filter.tel" size="small"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="品牌类型: " >
						<el-input v-model="category.name" icon="caret-bottom" placeholder="选择客户类别"  size="small"></el-input>
                        <div @click.stop="category.showTree=!category.showTree"
                            style="position: absolute;top:3px;left:0;z-index: 10;width: 100%;height: 30px;">
                            <div v-show="category.showTree" class="department-tree-select inline-tree" >
                                <el-tree :data="category.data"
                                    style="width: 240px"
                                    show-checkbox
                                    node-key="id"
                                    default-expand-all
                                    ref="searchTree"
                                    @check-change="handleCheckChange"
                                    :props="defaultProps">
                                </el-tree>
                            </div>
                        </div>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="签约服务:" class="aaaa">
						<el-select v-model="filter.signingserviceType" size="small" >
							<el-option label="全部" value=""></el-option>
							<el-option label="投诉" value="1"></el-option>
							<el-option label="数据" value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="销售员:">
						<el-input :disabled="true" v-show="readOnly" placeholder="销售员" v-model="seller" size="small"></el-input>
						<el-input v-show="!readOnly" readonly placeholder="销售员" v-model="seller" size="small" @focus="getOwnerData" icon="el-icon-search"></el-input>
					</el-form-item>
				</el-col>
				
			</el-row>

			<el-row>
				<el-col :span="4">
					<el-form-item label="品牌状态: " >
						<el-select v-model="filter.brandStatus" placeholder="请选择" size="small"> 	
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="4">
					<el-form-item label="创建时间:">
						<el-date-picker size="small" v-model="GmtCreate" type="datetimerange" :picker-options='pickerOptions1' start-placeholder="开始日期"
										end-placeholder="结束日期" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				
				 <el-col :span="4">
                    <el-form-item label="下次联系时间:">
                        <el-date-picker
                                size="small"
                                v-model="PlanTime"
                                type="datetimerange"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
			</el-row>

			<el-row>
				<el-col :span="24" class="action_col">
					<el-form-item class="action_button_group_open">
						<el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
						</el-button>
						<el-button size="small" type="primary" @click="getCustomers" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<el-row> 
			<el-button size="small" @click="refresh"><i class="fa fa-refresh"></i> 刷新</el-button> 
		</el-row>

		<el-row class="customer_row">
			<el-table :data="customerList" v-model="customerList" style="width: 100%;" :default-sort="{prop: 'brand_type', order: 'desc'}"  :row-class-name="tableRowClassName">
				<!--<el-table-column type="selection" width="55" className="asd">-->
				</el-table-column>
				<el-table-column prop="brandName" label="品牌名称" className="asds" min-width="130" 　align="center">
					<template scope="scope">
						<div class="customer_col">
							
							<span @click="handleToDetail(scope.row)" :class="{ active: scope.row.visited == true }">
                                {{ scope.row.brandName}}
                            </span>
							
							<!--<nuxt-link style="color: inherit" :to="{ path: '/brandadmin/brandDetail', query: { id: scope.row.id ,customerContactId: scope.row.customerContactId ,from: 'index',brandName: scope.row.brandName,flag:0}}">
								{{ scope.row.brandName}}
							</nuxt-link>-->
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="contactName" label="联系人" align="center" min-width='90' className="asds"></el-table-column>
				<el-table-column prop="tel" label="手机号码" align="center" min-width='110' className="asds"></el-table-column> 
				<el-table-column prop="brandTypeName" label="品牌类型" :render-header="renderHeader" min-width='80' align="center" className="asds"></el-table-column>
				<el-table-column prop="signingserviceTypeName" label="签约服务" align="center" min-width='100' className="asds"></el-table-column>
				<el-table-column prop="saleMemberName" label="销售员" align="center" min-width="55" className="asds"></el-table-column> 
				<el-table-column prop="iprMemberName" label="知产员" align="center" min-width="55" className="asds"></el-table-column>
				<el-table-column prop="purchaseMemberName" label="购买员" align="center" min-width="55" className="asds"></el-table-column>
				<el-table-column prop="dockMemberName" label="对接员" align="center" min-width="55" className="asds"></el-table-column> 
				<el-table-column prop="brandStatusName" label="状态" align="center" min-width='80' className="asds"></el-table-column>
				<el-table-column label="创建时间" :render-header="renderHeader" prop="createTime" min-width="150" align="center" className="asds"></el-table-column> 
				<el-table-column label="下次联系时间" :render-header="renderHeader" prop="planTime" min-width="150" align="center" className="asds"></el-table-column> 
				
			</el-table>
		</el-row>

		<el-row class="paging">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="pagingData.pageNum" :page-sizes="pagingData.pageSizes" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
			</el-pagination>
		</el-row>
		
		<!--*****************销售员框************-->
		<el-dialog title="选择销售员" :visible.sync="dialogVisible" @close="closeOwnerDialog">
			<el-row style="margin-bottom: 20px">
				<el-col :span="12">
					<el-select v-model="ownerFilter.deptId" placeholder="请选择部门" size="small" @change="selectSeller">
						<el-option v-for="(item,index) in ownerOptions" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-table ref="ownerMultipleTable" :data="ownerData" style="width: 100%" max-height="541"  @selection-change="handleOwnerSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="account" label="用户名" width="140"></el-table-column>
				<el-table-column prop="name" label="用户姓名"></el-table-column>
				<el-table-column prop="departmentName" label="部门"></el-table-column>
			</el-table>
			<el-row class="paging">
				<el-pagination @current-change="ownerHandleCurrentChange" @size-change="ownerHandleSizeChange" :current-page="ownerPage.pageNum" :page-sizes="ownerPage.pageSizes" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="ownerPage.total">
				</el-pagination>
			</el-row>

			<el-row style="margin-top: 20px">
				<el-col :span="12">
					<el-button type="primary" class="top_save" @click="onSubmit" size="small"><i class="fa fa-save"></i>　保存</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="danger" class="top_close" @click="dialogVisible = false" size="small"><i class="fa fa-sign-out"></i>关闭</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		
	</div>
</template>

<script>
	import Vue from 'vue'
	import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree, Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog ,Radio} from 'element-ui';
	import { mapGetters, mapActions, mapMutations } from 'vuex';
	import { SHOW_MESSAGE, MESSAGE_IDS, MESSAGE_NAMES, MESSAGE_TELS } from '../../store/mutation-types/template/index';
	import { getDate, getArraySub, getLevelNames, validTel, setToken, getCookie ,uniqueArr , getLevelBrand} from '../../utils/auth';

	Vue.use(Row);
	Vue.use(Radio);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Input);
	Vue.use(Select);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(ButtonGroup);
	Vue.use(Button);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Checkbox);
	Vue.use(CheckboxGroup);
	Vue.use(Pagination);
	Vue.use(Tooltip);
	Vue.use(Dialog);
	Vue.use(Tree);

	Vue.prototype.$message = Message;
	Vue.prototype.$confirm = MessageBox.confirm;

	export default {
		head() {
			return {
				title: this.title
			}
		},
		data() {
			return {
				defaultProps: {
                    children: 'children',
                    label: 'label'
                },
				category: {
                    name: '',
                    showTree: false,
                    data:[{
                        id: 0,
                        label: '全部',
                        children: [{    //预留children
                            id: 1,
                            label: '暂无数据'
                        }]
                    }]
                },
				options: [{//品牌状态
		          value: '',
		          label: '全部'
		        }, {
		          value: '1',
		          label: '正常'
		        }, {
		          value: '0',
		          label: '待审核'
		        }, {
		          value: '-6',
		          label: '审核不通过'
		        }, {
		          value: '-7',
		          label: '屏蔽'
		        }, {
		          value: '-8',
		          label: '暂停'
		        }, {
		          value: '2',
		          label: '待分配'
		        }, {
		          value: '-7,-8',
		          label: '暂停,屏蔽'
		        }],
		       
				title: '品牌列表',//页面内部tab的显示信息
				tabName: '品牌列表',//页面内部tab的显示信息
				seller: '',//销售员
				ownerOptions: [],//销售员部门下拉
				ownerData: [],//销售员弹窗的表格总信息
				ownerSelection: [],//销售员弹窗的 销售员多选
				dialogVisible: false,//销售员员弹窗默认 不显示
				filter: {
					brandName: '', //品牌名称
					contactName: '', //联系人
					tel: '', //联系人手机号
					brandTypes:'',//品牌类型下拉 框
					brandStatusName:'',//品牌状态下拉框
					signingserviceType: '',//签约服务
					saleIds: '' ,//销售员id（数组）
					knowledgeIds:'',//知产员
					buyer:'',//购买员
					abutment:'',//对接员
					brandStatus: '', //品牌状态
					pageSize: 50, // 每页条数
					pageNum: 1,//页码
					createTimeBegin: '', //创建时间开始
					createTimeEnd: '', //创建时间结束
					planTimeBegin: '',   //下次联系时间开始
                    planTimeEnd: '',  //下次联系时间结束
					sortField: 'gmt_create',//排序呢方式按照品牌类型
					sortOrder: 'desc',//排序方式
				},
				GmtCreate: [], //创建时间
				PlanTime: [],   //下次联系时间
				multipleSelection: [], // checkbox选中客户列表数据
				
				deptList: [], // 部门列表
				userFilter: {
					pageNum: 1,
					pageSize: 50,
					deptId: ''
				},//分配二级弹窗的请选择部门
				pagingUserData: {
					pageSizes: [10, 20, 20], // 分配二级弹窗的分页,每页可选条数列表
					total: 0,
					pageNum: 1
				},
				ownerPage: {
					pageSizes: [10, 20, 30], // 销售员弹窗的，每页可选条数列表
					total: 0,
					pageNum: 1
				},
				ownerFilter: {
					pageNum: 1,//销售员的弹窗请选择部门
					pageSize: 10,
					deptId: ''
				},
				pagingData: {
					pageSizes: [10, 20, 50], // 客户列表的,每页可选条数列表
					total: 0,
					pageNum: 1
				},
				dialogCurrentRow: null, // dialog高亮的行
				transSelectedUserId: null, // dialog单击选择的用户id
				transSelectedUserName:'',//dialog点击选择的用户名字
				departmentRoleId: '', // 当前登录用户的部门角色id
				customerList: [],//品牌列表
				brandList: [],//当前登录人的列表
				contactList:[],//联系人的模糊搜索
				sortOrder: true,
				readOnly: true,//销售员选项是否禁用
				stopinglist:true,//暂停按钮是否显示
				cancelstopinglist:true,//取消暂停按钮是否显示
				cancelhidelist:true,//取消屏蔽按钮是否显示
				examinelist:true,//审核按钮是否显示
				alginexaminelist:true,//再次审核按钮是否显示
				hidelist:true,//屏蔽按钮是否显示
				openlist:true,//开通维权通按钮是否显示
				ownerRows: [],
				message: {
					ids: [],
					names: [],
					tels: []
				},
				userData: {
					userName: '',
					userId: '',
					deptCode: ''
				},
//				 pickerOptions1: {
//                  disabledDate(time) {
//                      return time.getTime() > Date.now() - 8.64e7;
//                  }
//              },
				backSeller: '',
				backId: '',
				user: {
					deptId: '',
					departmentName: ''
				},
				pickerOptions1: { //创建时间只能选择今天之前的
	                 disabledDate(time) {
	                     return time.getTime() > Date.now();
	                 }
            	 },
			}
		},
		computed: {
			...mapGetters([
				"myCusBrandList",
				"myCustomerXY",
			])
		},
		methods: {
			//点击enter实现搜索
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode==13){ // enter 键
	                //要做的事情
	                this.getCustomers();
           		 }
			},
			//搜索条件加入store
			setFilterCookie() {
				let datas = JSON.stringify(this.filter);
				this.$store.commit('MY_CUS_BRABDLIST', {
					data:datas
				});
			},
			//点击刷新全局刷新页面
			refresh() {
				window.location.reload();
			},
			//品牌类选中回调
            handleCheckChange(data,checked) {
                this.category.name ='';
                var checkedId = this.$refs.searchTree.getCheckedKeys(data,true);
                var checkedName = [];
                if(checkedId.length == this.category.data[0].children.length) {
                    this.category.name = '全部'
                }else {
                    for(var i=0;i<checkedId.length;i++){
                        checkedName.push(getLevelNames(checkedId[i]));
                    }
                    this.category.name = checkedName.join(' / ');
                }
                this.filter.brandTypes = checkedId.join(',');
            },
			//点击窗口时获取到scrolltop的值
            treeBlurHide(event){
                this.category.showTree = false;
                this.pageXY = event.screenY;
                this.setXYtostore()
            },
			//scrolltop的值 加入store
            setXYtostore() {
                let data = document.getElementsByClassName('default')[0].scrollTop;
                this.$store.commit('MY_CUSTOMER_XY',{data});
            },
			renderHeader(h, { column, $index }){
                switch ($index) {
                	case 3:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('brand_type') }>品牌类型&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 10:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('gmt_create') }>创建时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 11:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('plan_time') }>下次联系时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    
                    
                }
            },
			 sortData(type) {
                this.filter.sortField = type;
                this.filter.sortOrder = this.sortOrder == true ? 'asc':'desc';
                this.sortOrder = !this.sortOrder;
                this.getCustomers();
            },
		
			// 获取品牌列表
			getCustomers() {
				if(this.filter.tel && validTel(this.filter.tel) == false) {
					Message.warning({
						message: '手机号码格式不正确'
					});
					return;
				}
				if(this.GmtCreate && this.GmtCreate[0]) {
					this.filter.createTimeBegin = this.GmtCreate[0] ? getDate(this.GmtCreate[0], true) : '';
					this.filter.createTimeEnd = this.GmtCreate[1] ? getDate(this.GmtCreate[1], true) : '';
				} else {
					this.filter.createTimeBegin = ''
					this.filter.createTimeEnd = ''
				}
				
				if (this.PlanTime&&this.PlanTime[0]) {
                    this.filter.planTimeBegin = this.PlanTime[0]?getDate(this.PlanTime[0],true):'';
                    this.filter.planTimeEnd = this.PlanTime[1]?getDate(this.PlanTime[1],true):'';
                }else{
                    this.filter.planTimeBegin =''
                    this.filter.planTimeEnd = ''
                }
				
				this.setFilterCookie();
				this.$store.dispatch('getBrandListBySale', this.filter)
					.then((response) => {
						if(!response) {
							return
						}
						this.contactList = response.data.data.list;
			            this.contactList.map(listOne=>{
			              Vue.set(listOne,'value',listOne.contactName)
			            })

						let result = response.data;
						if(result.code == 0 && result.data) {
							this.customerList = result.data.list;
							for(var i = 0; i < this.customerList.length; i++) {
								if(this.customerList[i].brandTypeName) {
									this.customerList[i].brandTypeName = this.customerList[i].brandTypeName.slice(0, 2)
								}
								this.customerList[i].visited = false;
							}
							 for(var j=0;j<this.visitedUrl.length;j++){
                                for(var i = 0; i < this.customerList.length; i++) {
                                    if(this.customerList[i].id == this.visitedUrl[j]){
                                        this.customerList[i].visited = true;
                                    }
                                }
                            }
							this.pagingData.total = result.data.total;
							this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else if(result.data = null) {
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						} else {
							this.customerList = [];
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						}
					})
			},
			
			// 获取用户列表------销售员的用户列表
			getUserList() {
				let data = this.userFilter;
				this.$store.dispatch('getUserOwnerData', data)
					.then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.code === 0) {
							this.userList = result.data.list;
							this.pagingUserData.total = result.data.total;
							this.pagingUserData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else {
							Message.error(result.message);
						}
					})
			},
			empty() {
				let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
				this.filter = {
					brandName: '', //客户名称
					contactName: '', //联系人
					tel: '', //手机号
					knowledgeIds:'',//知产员
					buyer:'',//购买员
					abutment:'',//对接员
					brandStatus: '', //品牌状态
					signingserviceType: '',//签约服务
					pageSize: pageSize, // 每页条数
					pageNum: pageNum,
					createTimeBegin: '', //创建时间开始
					createTimeEnd: '', //创建时间结束
					planTimeBegin: '',   //下次联系时间开始
                    planTimeEnd: '',  //下次联系时间结束
					sortField: 'gmt_create',//按照品牌类型排序
					sortOrder: 'desc',
					brandTypes:'',
					brandStatusName:''
				};
				this.category.name='';
				this.$refs.searchTree.setCheckedKeys([]);
				this.GmtCreate = []; //创建时间
				this.PlanTime = [];   //下次联系时间
				if(this.readOnly) {
					this.seller = this.backSeller;
					this.filter.saleIds = this.backId;
				} else {
					this.seller = '';
					this.filter.saleIds = '';
				}

				this.setFilterCookie();
			},
			
			// 关闭dialog回调
			closeDialog() {
				this.dialogCurrentRow = null; // 清除高亮的行
				this.transSelectedUserId = null; // 清除选择的用户
				this.userFilter.deptId = ''; // 清除select的部门选择
			},
			// dialog 用户列表单击选择高亮
			highlightDialog(val) {
				this.dialogCurrentRow = true;
			},
			
			
			handleCurrentChange(val) {
				this.filter.pageNum = val;
				this.getCustomers(this.filter);
			},
			handleSizeChange(val) {
				this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getCustomers(this.filter);
			},

			// 弹框用户列表选择分页size
			userHandleSizeChange(val) {
				this.userFilter.pageNum = 1;
				this.userFilter.pageSize = val;
				this.getUserList();
			},
			userHandleCurrentChange(val) {
				this.userFilter.pageNum = val;
				this.pagingUserData.pageNum = val;
				this.getUserList();
			},
			tableRowClassName(row, index) {
				if(row.signingserviceType == '1') {
					return 'info-row';
				}
				return '';
			},
			//跳转客户详情业
			handleToDetail(row) {
                let arr = this.visitedUrl;
                arr.push(row.id);
                arr = uniqueArr(arr);
                this.$store.commit('VISITEDURL',{visitedUrl:arr});
//<!--<nuxt-link style="color: inherit" :to="{ path: '/brandadmin/brandDetail', query: { id: scope.row.id ,customerContactId: scope.row.customerContactId ,from: 'index',brandName: scope.row.brandName,flag:0}}">
//								{{ scope.row.brandName}}
//							</nuxt-link>-->
                this.$router.push({path: '/brandadmin/brandDetail?id=' + row.id + '&customerContactId=' + row.customerContactId + '&from=index&brandName=' + row.brandName +'&flag=0'})
            },	
			getUserData() {
				this.$store.dispatch('getUserPersonalData')
					.then((response) => {
						if(!response) {
							return
						}
						var result = response.data;
						if(result.code === 0) {
							if(result.data && result.data.leaderType == 0) {
								this.seller = result.data.name;
								this.backSeller = result.data.name;
								this.backId = result.data.id;
								this.filter.saleIds = result.data.id;
								this.readOnly = true;
							} else {
								this.readOnly = false;
							}
							this.user.deptId = result.data.deptId;
							this.user.departmentName = result.data.departmentName;
							this.userData.userName = result.data.name;
							this.userData.userId = result.data.id;
							this.userData.deptCode = result.data.deptCode;
							this.getCustomers();
						}
					})
			},
			getOwnerData() {
				this.dialogVisible = true;
				this.getUserOwnerData();
				this.getOwnerDeptment();
			},

			//获取销售员列表
			getUserOwnerData() {
				this.$store.dispatch('getUserOwnerData', this.ownerFilter)
					.then((response) => {
						if(!response) {
							return
						}
						var result = response.data;
						if(result.code === 0) {
							this.ownerData = result.data.list;
							this.ownerPage.total = result.data.total;
							this.ownerPage.pageNum = result.data.pageNum;
						}
					})
			},

			//获取销售员部门下拉框
			getOwnerDeptment() {
				this.$store.dispatch('getOwnerDeptment')
					.then((response) => {
						if(!response) {
							return
						}
						var result = response.data;
						if(result.code === 0) {
							this.ownerOptions = result.data;
						}
					})
			},

			//销售员多选
			handleOwnerSelectionChange(selection) {
				let names = [];
				let ids = [];
				for(let i = 0; i < selection.length; i++) {
					names.push(selection[i].name);
					ids.push(selection[i].id)
				}
				this.ownerRows = ids;
				this.ownerSelection = names;
			},
			onSubmit() {
				this.seller = this.ownerSelection.join(',');
				this.filter.saleIds = this.ownerRows.join(',');
				this.dialogVisible = false;
			},
			// 弹框销售员列表选择分页size
			ownerHandleCurrentChange(val) {
				this.ownerFilter.pageNum = val;
				this.getUserOwnerData();
			},
			ownerHandleSizeChange(val) {
				this.ownerFilter.pageSize = val;
				this.ownerFilter.pageNum = 1;
				this.getUserOwnerData();
			},
			closeOwnerDialog() {
				this.ownerFilter.deptId = '';
				this.ownerFilter.pageNum = 1;
				this.ownerFilter.pageSize = 10;
				this.dialogVisible = false;
			},

			selectSeller(val) {
				this.getUserOwnerData();
			},
			selectDept(val) {
				this.userFilter.pageNum = 1;
				this.getUserList();
			},
			getBrandList(val) {
	          this.$store.dispatch('getSelfBrandsListcus').then((res)=>{
	          	if(res){
	          		this.brandList = res.data.data
		            this.brandList.map(list=>{
		              Vue.set(list,'value',list.brandName)
		            })
	          	}
	            
	          })
	        },

			//品牌列表的模糊搜索
			querySearch(queryString, cb) {
		        let restaurants = this.brandList;
		        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
		        // 调用 callback 返回建议列表的数据
		         clearTimeout(this.timeout);
          			this.timeout = setTimeout(() => {
           					cb(results);
          			}, 500 * Math.random());
		      },
		      createFilter(queryString) {
		        return (state) => {
		        	
		          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
		        };
		      },
		      handleSelect(item) {
		      	/*console.log(item)*/
		          this.filter.brandName = item.brandName;
		       },

		       	//联系人的模糊搜索
		       	querySearchAsync(queryString, cb) {
		        let restaurants = this.contactList;
		        let results = queryString ? restaurants.filter(this.createFilterOne(queryString)) : restaurants;
		        // 调用 callback 返回建议列表的数据
		         clearTimeout(this.timeout);
          			this.timeout = setTimeout(() => {
           					cb(results);
          			}, 500 * Math.random());
		      },
		      createFilterOne(queryString) {
		      	console.log(queryString.toLowerCase())
		        return (state) => {
		        	 console.log(state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
		          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
		        };
		      },
		      handleSelectAsync(item) {
		      	// console.log(item)
		          this.filter.contactName = item.contactName;
		       },



		},
		computed: {
			...mapGetters({
				'deleteBrand': 'getDeleteBrand',
				'pageTabsList': 'getPageTabsList',
				 'visitedUrl': 'getVisitedUrl'
			})
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
				if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
					let arr = this.pageTabsList;
					arr[arr.length - 1].name = this.tabName;
					this.$store.commit('PAGETABSLIST', {
						data: arr
					})
				}
			}
			this.getBrandList();
//			this.getCustomers();
		},
		mounted() {
			

			 // 获取品牌类别等级列表
            this.$store.dispatch('getBrandCateory')
            .then((response) => {
                if(!response){return}
                if(response.data && response.data.data ){
                    var data = response.data.data;
                    this.category.data[0].children=[];
                    for(var i=0;i< data.length;i++){
                        this.category.data[0].children.push({id: data[i].key , label : data[i].value});
                    }
                }
            })
			
			// //从store里取出filter数据
			let filter = this.$store.getters.myCusBrandList
			if(filter) this.filter = JSON.parse(filter);
			if(this.filter.createTimeBegin) {
				this.GmtCreate = [new Date(this.filter.createTimeBegin), new Date(this.filter.createTimeEnd)]
			}	
			if(this.filter.planTimeBegin) {
				this.PlanTime = [new Date(this.filter.planTimeBegin), new Date(this.filter.planTimeEnd)]
			}
			
			let scro = this.$store.getters.myCustomerXY;
            
            var de = document.getElementsByClassName("default")[0];
			
            setTimeout(function(){
                de.scrollTop = scro;
            },900)
			
			this.getUserData();

		}
	}
</script>

<style lang="scss">
	.customer-boxbrand {
		tbody{
			font-size: 14px!important;
		}
		.el-table .asds>div{	
    		padding: 0px;
    	}
		.operator-btn {
			.el-button {
				margin-left: 5px!important;
			}
		}
		.el-form {
			.el-col{
				.el-form-item {
					width: 70%
				}
			}
			
			
			.operator-btn {
				text-align: center;
				padding: 0 10px;
			}
			.el-input,
			.el-select,
			.el-cascader,
			.el-date-picker {
				width: 100%;
				
			}
			
		}
		.action_col {
			position: relative
		}
		.customer_row {
			margin-top: 20px;
			background-color: #ff0000;
			.el-table {
			
			}
		}
		.shenhedialog{
			.el-form-item{
				margin-left: 10%;
			}
			.el-textarea{
				width:80%;
			}
		}
		
		.paging {
			margin-top: 15px;
		}
		.customer_col {
			cursor: pointer;
			
			span {
				display: block;
				 color: #20a0ff;
                word-break: normal;
				a {
					text-decoration: none;
					color: #20a0ff;
				}
				img {
					margin-right: 5px;
					cursor: pointer
				}
			}
			span.active {
                color: #48576a;
            }
		}
		tbody {
			font-size: 12px;
		}
		// .active {
		//     display: none;
		// }
		.signRow {
			background-color: #00ee00;
		}
		.trans_button_col {
			text-align: center;
			margin-top: 15px
		}
		.top_close {
			float: left;
			margin-left: 20px;
			margin-top: 20px;
		}
		.top_close,
		.top_save {
			margin: 0 20px;
		}
		.top_save {
			float: right;
		}
		.shenhejilu{
			.el-form-item__label{
				height: 150px;
			}
		}
		.el-col-3{
			margin-left: 20px;
		}
	}
</style>


